<script lang="ts" setup>
import { useSubPage } from './composables'
import { ref } from 'vue'
import { onLoad, onShow, onShareAppMessage } from '@dcloudio/uni-app'
import { useScrollUpdownBottomContent } from '@/hooks'
import { freeList, getDialogueTopicList, freeNext } from '@/services/api'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
const { navBarInfo, navbarInitFinishHandle } = useSubPage()
import { useUserStore } from '@/stores'

const listData = ref()
const userStore  = useUserStore()
onLoad(() => {
  getData()
})
onShareAppMessage((e) => {
  return {
    title: '语境佳',
    path: '/pages/free/index',
  }
})
const toActivePage = async (citem, type) => {
  if (userStore.getIfBindSn) {
    if(type == 0){
      tnNavPage(`/home-page/freeDetail/index?id=289&type=0`)
    }else{
      tnNavPage(
              `/home-page/freeDetail/index?id=${citem.id}&gender=${citem.gender}&type=1`
            )
    }

  } else {
    uni.showModal({
      title: '设备未激活',
      content: '学习英语需要长期坚持哦，超多权益等你来解锁',
      confirmText: '立即激活',
      cancelText: '放弃福利',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
          userStore.toScanMate()
        } else if (res.cancel) {
          console.log('用户点击取消')
          tnNavPage('/pages/index/index', 'switchTab')
        }
      },
    })
  }
}
const getData = () => {
  let obj = {
    grade: uni.getStorageSync('gradeData').type,
  }
  freeList(obj).then((res) => {
    const { code, data } = res
    if (code === 0) {
      listData.value = data.map((item, index) => {
        return {
          ...item,
          isAnimation: false,
          current: 1,
        }
      })
      console.log(listData.value)
    }
  })
}

const refreshData = (id, index) => {
  listData.value[index].isAnimation = true
  let obj = {
    freeId: id,
    page: listData.value[index].current + 1,
    pageSize: 4,
  }
  freeNext(obj).then((res) => {
    const { code, data } = res
    if (code === 0) {
      listData.value[index].content = data.content
      listData.value[index].current = data.current
      setTimeout(() => {
        listData.value[index].isAnimation = false
      }, 1000)

      //如果当前页无数据，请求第一页数据
      if (data.content == null) {
        listData.value[index].current = 0
        refreshData(id, index)
      }
    }
  })
}
</script>
<template>
  <TnNavbar
    fixed
    home-icon=""
    home-text=""
    back-icon=" "
    back-text=" "
    bg-color="#f1f5fb"
    :bottom-shadow="false"
    :placeholder="false"
    title="续费"
    @init-finish="navbarInitFinishHandle"
  >
    <view class="tn-color-black"  style="font-size: 34rpx;">英语自由说</view>
  </TnNavbar>
  <!-- 顶部背景 -->
  <view class="top-bg" />
  <view class="page" :style="{ paddingTop: `${navBarInfo.height + 12}px` }">
    <view
      class="card-swiper"
      :circular="true"
      @click="tn('/pageA/navigation/navigation')"
      :autoplay="false"
      duration="500"
      interval="18000"
      @change="cardSwiper"
    >
      <view
        v-for="(item, index) in 1"
        :key="index"
        style="position: relative"
      >
       <!-- <view class="swiper-item image-banner">
          <image
            src="https://cdn.nlark.com/yuque/0/2023/png/280373/1702622459812-assets/web-upload/f6850ebf-e261-4e67-9574-53c5c83def10.png"
            mode="aspectFit"
          ></image>
        </view> -->
        <view
          class="swiper-item2 image-banner"
          :style="'background-image:url(https://cdn.nlark.com/yuque/0/2024/png/280373/1706708394879-assets/web-upload/dd983175-8ab7-4a19-b698-cfebf4be0b85.png);background-size: cover;'"
        >
        </view>
        <view class="swiper-item-text">
          <view class="banner-box mb-16">
            <image
              src="http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/eng2-wechat/static/banner/free-bg.png"
              mode="widthFix"
            ></image>
          </view>
        </view>
        <!-- <view
		  class="swiper-item-text-tips"
		  style="position: absolute; right: 0; top: 64rpx"
		>
		  <image
		    src="https://cdn.nlark.com/yuque/0/2024/png/280373/1706708143138-assets/web-upload/be40e441-03f1-42db-b0b3-cac416c859b4.png"
		  ></image>
		</view> -->
      </view>
    </view>
    <!-- UI设计的 -->
    <!-- 	<view class="main flex flex-ai-center flex-js-sb">
		<view>
			<view class="font-color-c19 font-size-16 font-w-bold">HI，我是你的专属外教</view>
			<view class="font-color-c333 font-size-12 mt-4">和我一起练习英语场景吧</view>
			<view class="mt-12 btn font-size-12 font-color-white flex flex-ai-center flex-js-center">跟Lily练口语</view>
		</view>
		<view>
			<image src="http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/static/free-index-bg.png"></image>
		</view>
	</view>	 -->
    <view class="items-list" v-for="(item, index) in listData">
      <view class="flex flex-js-sb flex-ai-center pb-16 plr-8 mb-12">
        <view class="listi-title font-size-16 font-w-bold">
          {{ item.name }}({{ item.total }})
        </view>
        <view class="flex" @click="refreshData(item.id, index)">
          <image
            class="mr-4 reset-icon"
            src="../../../static/imgs/refresh.png"
            :class="item.isAnimation ? 'refish' : ''"
          ></image>
          <view class="font-color-c666 font-size-12">换一批</view>
        </view>
      </view>
      <view class="item-bar-main">
        <view
          class="item-bar plr-12"
          v-for="(citem, cindex) in item.content"
          :key="index"
          @click="
            toActivePage(citem, 1)
          "
        >
          <view class="top-head">
            <view class="line"></view>
            <view>
              <image :src="citem.picture" mode="aspectFill"></image>
              <text
                class="font-size-16 tn-text-bold font-color-c19 font-size-16 ml-16"
                >{{ citem.name }}</text
              >
            </view>
          </view>
          <view
            class="tips font-size-14 font-color-c666 mt-9 bottom-head pr-12 text-overflow-2"
            >{{ citem.introduce }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import './styles/index.scss';
:deep(.tn-navbar-back__text) {
  display: none !important;
}
.tn-navbar-back__text {
  display: none !important;
}
</style>
